<template>
    <el-upload
        class="avatar-uploader"
        :action="option.action"
        :show-file-list="false"
        :on-success="handleSuccess"
        :before-upload="option.before"
        >
        <img 
            v-if="model" 
            :src="model" 
            class="avatar" 
            :style="{
                        width : option.width  || '178px', 
                        height: option.herght || '178px' 
                    }"
            />
        <i 
            v-else 
            class="el-icon-plus avatar-uploader-icon el-upload"
            :style="{
                    width: option.width   || '178px', 
                    height: option.herght || '178px' 
                }"
            />
    </el-upload>
</template>
<script>
export default {
    name: 'iv-upload',
    props: {
        value: {
            type: String,
            default: ''
        },
        option: {
            type: Object,
            default: () => {}
        }
    },
    computed: {
        model: {
            get(){
                return this.value 
            },
            set(val){
                this.$emit("update:value", val)
            }
        }
    },
    methods: {
        async handleSuccess(res, file, fileList){
            let url = await this.option.success(res);
            if(url){
                this.model = url
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.avatar-uploader {
    .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        &:hover {
            border-color: #409EFF;
        }
    }
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    padding-top: 38%;
    text-align: center;
}

.avatar {
    display: block;
    border-radius: 6px;
}
</style>
